<template>
    <div class="release-manage-detail">
        <div v-if="showPage == 0" class="empty"></div>
        <div v-else-if="showPage == 1" class="unbound-tip">
            <div>您暂未绑定账户,</div>
            <div>请联系公司管理员扫码绑定！</div>
        </div>
        <div v-else class="release-manage-detail-container">
            <div class="info">
                <div class="tag tag-0" v-if="detail.info.status == 0">未审核</div>
                <div class="tag tag-1" v-if="detail.info.status == 1">已审核</div>
                <div class="tag tag-0" v-if="detail.info.status == 2">驳回</div>
                <div class="row">
                    <div class="left">解押重量</div>
                    <div class="right"><span class="red-font">{{ detail.info.weight }}吨/{{ detail.info.num }}件</span></div>
                </div>
                <div class="row">
                    <div class="left">总货值</div>
                    <div class="right"><span class="red-font">￥{{ detail.info.amount }}</span></div>
                </div>
                <div class="row">
                    <div class="left">应回款</div>
                    <div class="right"><span class="red-font">￥{{ detail.info.sjAmount }}</span></div>
                </div>
                <div class="row">
                    <div class="left">单号</div>
                    <div class="right"><span>{{ detail.info.billno }}</span></div>
                </div>
                <div class="row">
                    <div class="left">货主</div>
                    <div class="right"><span>{{ detail.info.allname }}</span></div>
                </div>
                <div class="row">
                    <div class="left">创建人</div>
                    <div class="right"><span>{{ detail.info.createname }}</span></div>
                </div>
                <div class="row">
                    <div class="left">创建时间</div>
                    <div class="right"><span>{{ detail.info.createtime }}</span></div>
                </div>
                <div class="row">
                    <div class="left">是否出仓</div>
                    <div class="right"><span>{{ detail.info.isout == 1 ? '是' : '否' }}</span></div>
                </div>
                <div class="row">
                    <div class="left">出仓日期</div>
                    <div class="right"><span>{{ detail.info.ssrqid }}</span></div>
                </div>
                <div class="row">
                    <div class="left">车牌司机</div>
                    <div class="right"><span>{{ detail.info.dzzy7 }}</span></div>
                </div>
                <div class="row">
                    <div class="left">出仓备注</div>
                    <div class="right"><span>{{ detail.info.dzbz }}</span></div>
                </div>
            </div>
            <div class="list" v-if="detail.list.length">
                <div class="item" v-for="item in detail.list" :key="item.id">
                    <div class="item-main">
                        <div class="item-main-row">
                            <div class="left">{{ item.sptm }}</div>
                            <div class="right">{{ item.spzs }}</div>
                        </div>
                        <div class="item-main-row">
                            <div class="left">{{ item.spcd }} <span style="margin-left: 5px;">{{ item.wpggA }}</span></div>
                            <div class="right">{{ item.spckmc }}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="row">
                        <div class="left">合同号</div>
                        <div class="right"><span>{{ item.contractNo }}</span></div>
                    </div>
                    <div class="row">
                        <div class="left">批号</div>
                        <div class="right"><span>{{ item.spbh }}</span></div>
                    </div>
                    <div class="row">
                        <div class="left">柜号</div>
                        <div class="right"><span>{{ item.spgh }}</span></div>
                    </div>
                    <div class="row">
                        <div class="left">估值单价</div>
                        <div class="right"><span>{{ item.price }}元</span></div>
                    </div>
                    <div class="row">
                        <div class="left">出仓重量</div>
                        <div class="right"><span>{{ item.spsl }}吨/{{ item.spjs }}件</span></div>
                    </div>
                    <div class="row">
                        <div class="left">解押重量</div>
                        <div class="right"><span>{{ item.weight }}吨/{{ item.num }}件</span></div>
                    </div>
                    <div class="row">
                        <div class="left">解押货值</div>
                        <div class="right"><span>{{ item.amount }}元</span></div>
                    </div>
                    <div class="row">
                        <div class="left">支付比例</div>
                        <div class="right"><span>{{ item.ratio }}%</span></div>
                    </div>
                    <div class="row">
                        <div class="left">手续单价</div>
                        <div class="right"><span>{{ item.commissionPrice }}元/吨</span></div>
                    </div>
                    <div class="row">
                        <div class="left">手续总价</div>
                        <div class="right"><span>{{ item.commissionSubtotal }}元</span></div>
                    </div>
                    <div class="row">
                        <div class="left">应回款</div>
                        <div class="right"><span class="red-font">￥{{ item.sjAmount }}</span></div>
                    </div>
                </div>
            </div>
            <div class="btn-box" v-if="detail.info.status == 0">
                <div class="btn btn1" @click="handleAudit">审核通过</div>
                <div class="btn btn2" @click="show = true">驳回</div>
            </div>
        </div>
        <van-dialog v-model:show="show" title="驳回原因" show-cancel-button show-confirm-button confirm-button-color="#2386E3"
            @confirm="handleReject" :before-close="onBeforeClose" @closed="detail.rejectcause = ''">
            <van-field v-model="detail.rejectcause" placeholder="请输入驳回原因" :autofocus="true" />
        </van-dialog>

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { mallReleaseDetail, mallReleaseAudit, mallReleaseReject } from '@/api/pledge'
import { WEIGHT_DIGIT, NUMBER_DIGIT, AMOUNT_DIGIT } from '@/utils/constant'
import { useRoute } from 'vue-router'
import { msgError, msgSuccess, msgConfirm } from '@/utils/message'
import { setToken, setExpiresIn, getOpenId, setOpenId } from '@/utils/auth'
import { h5login, getStaffUsersListByOpenId, getOpenIdByCode, getConfigKey } from '@/api/staffUser'
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage'

const route = useRoute();
const detail: any = reactive({
    id: route.query.id || '',
    loading: true,
    info: {
        status: '0',
        weight: '',//解押重量
        num: '',//解押件数
        amount: '',//总货值
        sjAmount: '',//应回款
        billno: '',
        allname: '',
        createname: '',
        createtime: '',
        isout: '',
        ssrqid: '',
        dzzy7: '',//司机
        dzbz: ''
    },
    list: [{}],
    rejectcause: ''
})
let show: any = ref(false);
let showPage: any = ref(0);

const configKeyParam: string = 'GZH_APP_ID'
let wxAppid: string = ''
const code: any = route.query.code;
//是否已调用微信返回的code,如果调用wxCode则为1，否则为0
const wxCode: number = getLocalStorage('wxCode') == 1 ? 1 : 0;
const openId: any = getOpenId();
const staffUserListData: any = reactive({
    list: []
})

onMounted(() => {
    if (openId) {
        staffUsersListByOpenId(openId);
    } else {
        if (code) {
            if (wxCode == 0) {
                const href = window.location.href.split('?')[0]
                return configKey(href)
            }
            if (wxCode == 1) {
                setLocalStorage('wxCode', 0)
                return openIdByCode(code)
            }
        } else {
            configKey(window.location.href)
        }
    }
})

function configKey(redirectUri: string) {
    getConfigKey(configKeyParam).then((res: any) => {
        wxAppid = res.msg;
        getCode(redirectUri);
    })
}
function getCode(redirectUri: string) {
    setLocalStorage('wxCode', 1)
    let param = "appid=" + wxAppid + "&redirect_uri=" + redirectUri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect" + "&id=" + route.query.id;
    let url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + param;
    window.location.href = url
}

function openIdByCode(code: string) {
    getOpenIdByCode({ code: code }).then((res: any) => {
        const openId: string = res.msg;
        setOpenId(openId);
        staffUsersListByOpenId(openId);
    })
}

function staffUsersListByOpenId(openId: string) {
    getStaffUsersListByOpenId({ openId: openId }).then((res: any) => {
        const data = res.data;
        staffUserListData.list = data;
        if (data && data.length == 0) {
            return showPage.value = 1;
        }
        if (data && data.length == 1) {
            login(0)
        }
    })
}

function login(index: number) {
    const data: any = staffUserListData.list
    h5login({ username: data[index].userName, password: data[index].password }).then((res: any) => {
        const data1 = res.data;
        setToken(data1.access_token);
        setExpiresIn(data1.expires_in);
        getReleaseDetail();
    })
}

function getReleaseDetail() {
    mallReleaseDetail(detail.id).then(res => {
        showPage.value = 2;
        let data = res.data;
        detail.info = data.info;
        detail.list = data.list;
        getSumList();
    })
}

function getSumList() {
    const dts = detail.list;
    let num = 0
    let weight = 0
    let amount = 0
    let sjAmount = 0
    for (let i in dts) {
        const item = dts[i]
        item.num = item.num || 0
        item.weight = item.weight || 0
        item.amount = item.jyAmount || 0
        item.sjAmount = item.sjAmount || 0
        num += Number(item.num)
        weight += Number(item.weight)
        amount += Number(item.jyAmount)
        sjAmount += Number(item.sjAmount)
    }
    detail.info.weight = parseFloat(weight.toFixed(WEIGHT_DIGIT));
    detail.info.num = parseFloat(num.toFixed(NUMBER_DIGIT));
    detail.info.sjAmount = parseFloat(sjAmount.toFixed(AMOUNT_DIGIT));
    detail.info.amount = parseFloat(amount.toFixed(AMOUNT_DIGIT));
}

//审核通过
function handleAudit() {
    const list = detail.list;
    for (let i in list) {
        const item = list[i];
        const num = item.num;
        const zyNum = item.numj;
        const spdm = item.spdm;
        if (spdm == '担保') return msgError(item.sptm + "当前库存类型是JG，不允许JS")
        if (num - zyNum > 0) return msgError(item.sptm + "JS件数超过SD件数")
    }

    msgConfirm("是否确认此操作？审核通过后，货物解押并创建出仓单").then(() => {
        mallReleaseAudit(detail.id).then(res => {
            msgSuccess('审核通过！')
            detail.info.status = 1;
        })
    })
}

// 驳回
function handleReject() {
    if (!detail.rejectcause) return msgError('请输入驳回原因！');
    let data = {
        id: detail.id,
        rejectcause: detail.rejectcause
    }
    mallReleaseReject(data).then(res => {
        msgSuccess('审核驳回！')
        detail.info.status = 2;
        show.value = false;
    })

}

function onBeforeClose(action: any) {
    if (action === "confirm") {
        if (!detail.rejectcause) return msgError('请输入驳回原因');
    } else {
        show.value = false;
    }
}
</script>

<style lang="scss" scoped>
div,
span {
    box-sizing: border-box;
}

.empty,
.unbound-tip {
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.release-manage-detail {
    width: 100%;
    background-color: #F2F2F2;
    min-height: 100vh;

    .release-manage-detail-container {
        padding: 24px;
        width: 100%;

        .info,
        .item {
            padding: 40px 40px;
            background-color: #fff;
            border-radius: 32px;
            overflow: hidden;
            position: relative;

            &:not(:last-child) {
                margin-bottom: 24px;
            }

            .tag {
                width: 104px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-radius: 0px 32px 0px 32px;
                font-size: 24px;
                font-weight: 500;
                position: absolute;
                top: 0;
                right: 0
            }

            .tag-0 {
                background: #FFEBE3;
                color: #F17844;
            }

            .tag-1 {
                background: #dbf5ec;
                color: #2FB17C;
            }

            .item-main {
                .item-main-row {
                    margin-bottom: 16px;
                    font-weight: 500;
                    color: #000000;
                    display: flex;

                    .left {
                        width: 300px;
                    }

                    .right {}
                }
            }

            .line {
                margin: 24px 0;
                border: 1px solid rgba(209, 209, 209, 0.1);
            }

            .row {
                font-size: 30px;
                display: flex;

                &:not(:last-child) {
                    margin-bottom: 16px;

                }

                .left {
                    width: 184px;
                    color: #7e7e7e;
                }

                .right {
                    color: #000000;

                    .red-font {
                        color: #CD4C46;
                    }
                }
            }
        }

        .btn-box {
            margin-top: 44px;

            .btn {
                margin: 24px auto 0;
                width: 690px;
                height: 96px;
                line-height: 96px;
                text-align: center;
                border-radius: 48px;
            }

            .btn1 {
                color: #FFFFFF;
                background: #2386E3;
            }

            .btn2 {
                color: #333333;
                background: #FFFFFF;
                border: 2rpx solid #DDDDDD;
            }
        }
    }
}</style>